<template>
    <div class="reminder-dialog check_member_box">
        <el-dialog title="会员详情"
                   center
                   width="50%"
                   :visible.sync="visible"
                   :close-on-click-modal="false"
                   :close-on-press-escape="false"
                   @closed="onCloseDialog">
            <el-form label-width="150px" class="fumin_detail member_check_box">
                <el-collapse v-model="activeNames">
                    <el-collapse-item name="1" v-if="customerInfo != undefined">
                        <template slot="title">
                            联系人 <el-button size="small" type="primary" class="up_down_text">{{activeNames.indexOf('1') > -1 ? '收起' : '展开'}}<i :class="[activeNames.indexOf('1') > -1 ? 'el-icon-arrow-up' : 'el-icon-arrow-down']"></i></el-button>
                        </template>
                        <el-row>
                            <el-col :span="12">
                                <img class="idCardImage" :src="customerInfo.frontPhotoAddress">
                            </el-col>
                            <el-col :span="12">
                                <img class="idCardImage" :src="customerInfo.backPhotoAddress">
                            </el-col>
                        </el-row>
                        <el-col :span="12" class="text_left">
                            <el-form-item label="姓名：">
                                <span>{{customerInfo.customerName}}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" class="text_left">
                            <el-form-item label="手机号：">
                                <span>{{customerInfo.phoneNumber}}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" class="text_left">
                            <el-form-item label="性别：">
                                <span>{{customerInfo.sex}}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" class="text_left">
                            <el-form-item label="身份证号：">
                                <span>{{customerInfo.idNumber}}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" class="text_left">
                            <el-form-item label="电子邮箱：">
                                <span>{{customerInfo.email}}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" class="text_left">
                            <el-form-item label="交易地点：">
                            <span v-if="customerInfo.tradeLocationProvince != null">{{`${customerInfo.tradeLocationProvince}/
                        ${customerInfo.tradeLocationCity}/
                        ${customerInfo.tradeLocation}`}}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24" class="text_left">
                            <el-form-item label="详细地址：">
                                <span>{{customerInfo.contactAddress}}</span>
                            </el-form-item>
                        </el-col>
                    </el-collapse-item>
                    <el-collapse-item name="2" v-show="memberState >= 2">
                        <template slot="title">
                            机构认证 <el-button size="small" type="primary" class="up_down_text">{{activeNames.indexOf('2') > -1 ? '收起' : '展开'}}<i :class="[activeNames.indexOf('2') > -1 ? 'el-icon-arrow-up' : 'el-icon-arrow-down']"></i></el-button>
                        </template>
                        <el-col :span="8">
                            <img class="idCardImage" :src="enterpriseInfo.credentialPhotoAddress">
                        </el-col>
                        <el-col :span="8">
                            <img class="idCardImage" :src="enterpriseInfo.artificialPersonFrontPhotoAddress">
                        </el-col>
                        <el-col :span="8">
                            <img class="idCardImage" :src="enterpriseInfo.artificialPersonBackPhotoAddress">
                        </el-col>
                        <el-col :span="12" class="text_left">
                            <el-form-item label="统一社会信用代码：">
                                <span>{{enterpriseInfo.unifiedSocialCreditCode}}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" class="text_left">
                            <el-form-item label="营业执照注册号：">
                                <span>{{enterpriseInfo.licenceRegisterNo}}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" class="text_left">
                            <el-form-item label="组织机构代码：">
                                <span>{{enterpriseInfo.organizationCodeNumber}}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" class="text_left">
                            <el-form-item label="营业执照名称：">
                                <span>{{enterpriseInfo.licenceName}}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" class="text_left">
                            <el-form-item label="法定代表人住址：">
                                <span>{{enterpriseInfo.licenceAddr}}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" class="text_left">
                            <el-form-item label="法定代表人姓名：">
                                <span>{{enterpriseInfo.legalName}}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" class="text_left">
                            <el-form-item label="法人身份证号码：">
                                <span>{{enterpriseInfo.legalCertNo}}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" class="text_left">
                            <el-form-item label="纳税人名称：">
                                <span>{{enterpriseInfo.taxCertName}}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" class="text_left">
                            <el-form-item label="企业类型：">
                                <span>{{enterpriseInfo.licenceType}}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" class="text_left">
                            <el-form-item label="公司成立日期：">
                                <span>{{enterpriseInfo.foundedDate}}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" class="text_left">
                            <el-form-item label="营业执照类型：">
                                <span>{{enterpriseInfo.licenceRegisterTypeId === 2401 ? '三证合一' : '普通'}}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" class="text_left">
                            <el-form-item label="企业编号：">
                                <span>{{enterpriseInfo.corpId}}</span>
                            </el-form-item>
                        </el-col>
                        <!--<hr>-->
                        <el-row>
                            <el-button type="text" class="register-btn-text">其他信息</el-button>
                        </el-row>
                        <el-col :span="12" class="text_left">
                            <el-form-item label="ID：">
                                <span>{{enterpriseInfo.enterpriseId}}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" class="text_left">
                            <el-form-item label="关联中介：">
                                <span>{{enterpriseInfo.simpleEnterpriseName}}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" class="text_left">
                            <el-form-item label="渠道代理：">
                                <span>{{enterpriseInfo.channelAgent}}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" class="text_left">
                            <el-form-item label="注册业务员：">
                                <span>{{enterpriseInfo.salesman}}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" class="text_left">
                            <el-form-item label="邀请人：">
                                <span>{{enterpriseInfo.inviterName}}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" class="text_left">
                            <el-form-item label="业务员归属：">
                                <span>{{enterpriseInfo.salesmanAffiliation}}</span>
                            </el-form-item>
                        </el-col>
                    </el-collapse-item>
                    <el-collapse-item name="3" v-show="memberState >= 3">
                        <template slot="title">
                            业务授权 <el-button size="small" type="primary" class="up_down_text">{{activeNames.indexOf('3') > -1 ? '收起' : '展开'}}<i :class="[activeNames.indexOf('3') > -1 ? 'el-icon-arrow-up' : 'el-icon-arrow-down']"></i></el-button>
                        </template>
                        <el-col :span="12" class="text_left">
                            <el-form-item label="经办人姓名：">
                                <span>{{authInfo.agentTreasurerName}}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" class="text_left">
                            <el-form-item label="经办人手机号：">
                                <span>{{authInfo.agentTreasurerPhone}}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24" class="text_left">
                            <el-form-item label="经办人身份证号：">
                                <span>{{authInfo.agentTreasurerCertNo}}</span>
                            </el-form-item>
                        </el-col>
                    </el-collapse-item>
                    <el-collapse-item name="4" v-show="memberState >= 4">
                        <template slot="title">
                            账户绑定 <el-button size="small" type="primary" class="up_down_text">{{activeNames.indexOf('4') > -1 ? '收起' : '展开'}}<i :class="[activeNames.indexOf('4') > -1 ? 'el-icon-arrow-up' : 'el-icon-arrow-down']"></i></el-button>
                        </template>
                        <el-table :data="relateInfo.bankAccounts">
                            <el-table-column prop="accountNumber" label="账号"></el-table-column>
                            <el-table-column prop="bankName" label="银行名称"></el-table-column>
                            <el-table-column prop="vAcctNo" label="虚拟号"></el-table-column>
                            <el-table-column prop="checkStatus" label="审核状态"></el-table-column>
                        </el-table>
                    </el-collapse-item>
                    <el-collapse-item name="5" v-show="memberState >= 2">
                        <template slot="title">
                            企业操作员 <el-button size="small" type="primary" class="up_down_text">{{activeNames.indexOf('5') > -1 ? '收起' : '展开'}}<i :class="[activeNames.indexOf('5') > -1 ? 'el-icon-arrow-up' : 'el-icon-arrow-down']"></i></el-button>
                        </template>
                        <el-table :data="enterpriseInfo.operators">
                            <el-table-column type='index' :index="indexMethod" label="序号"></el-table-column>
                            <el-table-column prop="isOperator" :formatter="isOperator" label="类型"></el-table-column>
                            <el-table-column prop="customerName" label="用户名"></el-table-column>
                            <el-table-column prop="phoneNumber" label="手机号"></el-table-column>
                            <el-table-column prop="bundlingTime" label="绑定时间"></el-table-column>
                        </el-table>
                    </el-collapse-item>
                </el-collapse>
            </el-form>
            <span slot="footer" class="dialog-footer submit-btn">
            <el-button size="small" type="info" @click="visible = false">关闭</el-button>
        </span>
        </el-dialog>
    </div>
</template>

<script lang="ts">
    import { Vue, Component, Prop } from 'vue-property-decorator';
    import { State, Getter, Action, Mutation, namespace } from 'vuex-class';
    import { NoCache } from '@/util/decorators'
    var memberStore = namespace('member')
    
    @Component
    export default class MemberDetail extends Vue {
        // ------------------- data -------------------
        @memberStore.State('memberDetail') memberDetail!:Array<object>
        activeNames = [ "1", "2", "3", "4", "5" ]
        visible = false
        memberState = 1
        // get visible() {
        //     return this.show
        // }
        // ------------------- computed -------------------
        @NoCache
        get customerInfo() {
            return this.memberDetail[0]
        }

        @NoCache
        get enterpriseInfo() {
            if (this.memberState >= 2) {
                return this.memberDetail[1]
            }
            return {
                credentialPhotoAddress: '',
                artificialPersonFrontPhotoAddress: '',
                artificialPersonBackPhotoAddress: '',
                unifiedSocialCreditCode: '',
                licenceRegisterNo: '',
                organizationCodeNumber: '',
                licenceName: '',
                licenceAddr: '',
                legalName: '',
                legalCertNo: '',
                taxCertName: '',
                licenceType: '',
                foundedDate: '',
                licenceRegisterTypeId: '',
                corpId: '',
                enterpriseId: '',
                simpleEnterpriseName: '',
                channelAgent: '',
                salesman: '',
                inviterName: '',
                salesmanAffiliation: '',
                operators: []
            }
        }

        @NoCache
        get authInfo() {
            if (this.memberState >= 3) {
                return this.memberDetail[2]
            }
            return {
                agentTreasurerName: '',
                agentTreasurerPhone: '',
                agentTreasurerCertNo: ''
            }
        }

        @NoCache
        get relateInfo() {
            if (this.memberState >= 4) {
                return this.memberDetail[3]
            }
            return {
                bankAccounts: []
            }
        }

        // ------------------- methods -------------------
        indexMethod(index:number) {
            return index
        }

        isOperator(row:object, column:string, cellValue:number, index:number) {
            return cellValue == 0 ? '操作员' : '管理员'
        }

        onCloseDialog() {
            this.visible = false;
        }

        open (memberState:number) {
            this.memberState = memberState;
            this.visible = true;
        }

        close () {
            this.visible = false;
        }

        // ------------------- lifecycle -------------------
        mounted() {

        }

    }
</script>

<style lang="scss">
    .idCardImage {
        width:227px;
        height:143px;
    }
</style>
